<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <title>AQ Demo</title>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-1988451-7"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-1988451-7');
    </script>


  </head>
  <body>
    <div class="container">

      <h1>Question Generation Demo
        <div id="connection-indicator-wrapper">
          Connection Status:
          <div id="connection-indicator">
            &nbsp;
          </div>
        </div>
      </h1>

      <p>An interactive demo of <a href="https://github.com/bloogram/question-generation">Tom Hosking's MSc project</a> on question generation, in collaboration with <a href="http://bloomsbury.ai/">Bloomsbury AI</a>. Enter some text in the box, select a word(s) within the text, and click generate to get a question with that answer. Currently using model <span id="model-slug"></span></p>

      <form id="qgen-form" onsubmit="return false;">
        <div class="form-group">
          Load preset document:
          <button class="btn btn-primary" onclick="seedWithFootball(); return false;" type="button">World Cup 2018</button>
          <button class="btn btn-primary" onclick="seedWithSquad(); return false;" type="button">SQuAD</button>
          <button class="btn btn-primary" onclick="seedWithSquad2(); return false;" type="button">SQuAD 2</button>
          <button class="btn btn-primary" onclick="seedWithSquad3(); return false;" type="button">SQuAD 3</button>
        </div>
        <div class="form-group">
          <label for="context">Document</label>
          <textarea class="form-control" id="context" rows="10"></textarea>

        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Answer</label>
          <input type="text" class="form-control" id="answer" placeholder="Enter answer text">
          <small class="text-muted">
            This is case sensitive, and must exist within the context. If it appears multiple times, the first occurence will be used.
          </small>
        </div>
        <button class="btn btn-primary" onclick="getQ(); return false;" type="submit">Generate</button>
        <hr/>
        <div class="form-group">
          <p>Generated Question:</p>
          <div id="response-spinner" class="spinner d-none">
            <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
          </div>
          <div id="response"><p>Click the "Generate" button to get a question!</p></div>
      </form>

    </div>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="/static/spinner.css" />
    <link rel="stylesheet" href="/static/qgen.css" />

    <script type="text/javascript" src="/static/qgen.js"></script>

    <script>
    // Set up an event listener for the contact form.
    $("#qgen-form").submit(function(event) {
        // Stop the browser from submitting the form.
        event.preventDefault();

        // TODO
    });
    ping();
    seedWithFootball();
    getCurrentModelSlug();
    </script>
  </body>
</html>
